<!--  -->
<template>
  <div class='takeList-page'>
    <div class="take-tab">
      <van-sticky>
        <c-title text="参与记录" :hide="false"></c-title>
        <van-tabs
          v-model="active"
          :title-active-color="'var(--themeBaseColor)' || '#FE5E56'"
          title-inactive-color="#00001C"
          :color="'var(--themeBaseColor)' || '#FE5E56'"
          line-width="15px"
          @click="takeTab">
          <block v-for="(item,index) in tabList" :key="index">
            <van-tab :title="item.name" :name="item.status"></van-tab>
          </block>
        </van-tabs>
        <div class="category-item" >
          <div class="category-input flex-a-c flex-j-sb" @click.stop="categoryClick">
            <p :class="categoryId?'font-class':''">{{categoryTitle}}</p>
            <span class="iconfont icon-icon_down1" :class="menuClass?'icon-class':''"></span>
          </div>
          <div class="category-menu" :class="menuClass?'menu-class':''">
            <div class="category-name" v-for="(item,index) in categoryList" :key="index" @click.stop="categoryOn(item)">{{item.category_name}}</div>
          </div>
        </div>
      </van-sticky>
    </div>
    <div class="take-list" v-if="groupList.length > 0">
      <block v-for="(item,index) in groupList" :key="index">
        <div class="take-item flex-a-c flex-j-sb">
          <div class="wrap">
            <div class="head flex-a-c">
              <h3>{{item.group && item.group.group_name}}</h3>
              <div >
                <div class="error" :class="active == 1?'red':''" v-show="active == 2 || active == 1">{{item.status_name}}</div>
              </div>
            </div>
            <p>消费金额：{{item.order && item.order.price}}</p>
            <p>下单时间：{{item.order && item.order.created_at}}</p>
          </div>
          <div class="classify-btn" @click="toDetail(item.order)">
            <div class="btn">订单详情</div>
          </div>
        </div>
      </block>
    </div>
    <van-empty description="暂无数据"  v-else/>
    <div class="mh-50"></div>
  </div>
</template>

<script>
  import takeList_controller from "./takeList_controller.js";
  export default takeList_controller;
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .mh-50 {
    height: 3.125rem;
    clear: both;
  }
  .take-tab ::v-deep .van-tabs__line {
    bottom:21px;
  }
  .takeList-page {
    .take-tab {
      .category-item {
        background-color: #fff;
        padding:0.5rem 0.75rem;
        position: relative;
        .category-input {
          border-radius: 1.125rem;
          background-color: #F6F6F6;
          padding:0.5rem 1.25rem 0.5rem 0.75rem;
          .font-class {
            color:#3B3B4A;
          }
          p {
            font-weight: 400;
            font-size: 0.75rem;
            line-height: 0.75rem;
            color: #999999;
          }
          span {
            color:#999999;
            font-size: 0.75rem;
            transform: rotate(0deg);
            transition: 0.5s all;
          }
          .icon-class {
            transform: rotate(180deg);
            transition: 0.5s all;
          }
        }
        .category-menu {
          position: absolute;
          left:0.75rem;
          top:2.625rem;
          height: 9.375rem;
          overflow-y: scroll;
          width: calc(100% - 1.5rem);
          background-color: #FFFFFF;
          padding:0 0.75rem;
          box-shadow: 0rem 0rem 0.125rem rgba(0,0,0,0.1);
          border: 0.0625rem solid #E7E7E7;
          border-radius: 0.25rem;
          opacity: 0;
          display: none;
          transition: 0.5s all;
          .category-name {
            font-size: 0.875rem;
            color: #333333;
            padding:0.75rem 0;
            text-align: left;
            position: relative;
            &::before{
              content: "";
              position: absolute;
              top: -50%;
              bottom: -50%;
              left: -50%;
              right: -50%;
              width: 200%;
              height: 200%;
              -webkit-transform: scale(0.5);
              transform: scale(0.5);
              border-bottom: solid 0.0625rem #F0F0F1;
              box-sizing:border-box;
            }
            &:last-child {
              &::before {
                border-bottom: none;
              }
            }
          }
          // margin:0 0.75rem;
        }
        .menu-class {
          transition: 0.5s all;
          opacity: 1;
          display: block;
        }
      }
    }
    .take-list {
      margin:0.75rem;
      .take-item {
        border-radius: 0.75rem;
        background-color: #fff;
        padding:0.625rem 0.75rem 0.25rem 0.75rem;
        margin:0 0 0.75rem 0;
        .wrap {
          text-align: left;
          .head {
            margin:0 0 0.25rem 0;
            h3 {
              font-size: 0.875rem;
              color: #333333;
              font-weight: 400;
              padding:0 0.5rem 0rem 0;

            }
            .error {
              font-size: 0.6875rem;
              line-height: 0.6875rem;
              padding:0.125rem 0.25rem;
              border-radius: 0.125rem;
              background-color: #D6D6DC;
              color:#fff;
            }
            .red {
              background-color:#FE5E56;
            }
          }
          p {
            font-size: 0.75rem;
            color: #AAAAB3;
            padding: 0 0 0.3125rem 0;
          }
        }
        .classify-btn {
          .btn {
            box-sizing: border-box;
            border: 0.0625rem solid var(--themeBaseColor);
            font-size: 0.8125rem;
            line-height: 0.8125rem;
            padding:0.5rem 1.1875rem;
            border-radius: 0.25rem;
            color: var(--themeBaseColor);
          }
        }
      }
    }
  }
</style>